<template>
  <div class="model-list">
    <div class="new-nav-page" id="container" style="width: 100%">
      <headerCon
        ref="myDiv"
        :logoActive="logoActive"
        :hotSearchList="hotSearchList">
      </headerCon>
    </div>
    <!-- 搜索 + 轮播图 start -->
    <div class="new-nav-search-mask"></div>
    <div class="mask-www-input-search"></div>
    <!-- 动画效果-->
    <div class="index-banner-search">
      <!--搜索 -->
      <div class="newwww-search-content">
        <!-- 新增样式 newwww-search-show-->
        <div class="search-content">
          <div class="wid-search">
            <div class="index-spring-festival sysFocusImgSing focus66">
              <a rel="nofollow" href="#" target="_blank"
                ><img
                  :src="siteConf.logo3"
                  alt="默认logo"
                  title="默认logo"
              /></a>
            </div>
            <div class="search-title clearfix">
              <span class="active" data-id="1">3D模型 </span>
            </div>
            <div class="search-form-input">
              <svg class="icon nav_icon_search" aria-hidden="true">
                <use xlink:href="#icon-nav_icon_search"></use>
              </svg>
              <input
                data-type="1"
                autocomplete="off"
                class="www-keyword js-search-normal"
                type="text"
                placeholder="搜索ID、关键词"
              />
              <div class="search-operation">
                <label
                  for="searchUploaderInput"
                  class="search_image_search search_TB_soutu"
                >
                  <svg class="icon" aria-hidden="true">
                    <use
                      xlink:href="#icon-banner_author_pop_info_icon_search_similar"
                    ></use>
                  </svg>
                  <input
                    id="searchUploaderInput"
                    class="input-uploader"
                    type="file"
                    name="file"
                  />
                </label>
                <svg
                  class="icon search_image_search search_TB_remove"
                  aria-hidden="true"
                >
                  <use xlink:href="#icon-search_pop_btn_close_xl"></use>
                </svg>
                <span class="btn-key-search js-search-btn">搜 索</span>
              </div>
              <div class="newww-related-search">
                <div class="item-related-search search-related-kyeword">
                  <div class="list-related">
                    <p class="related-title">
                      热门搜索
                      <el-icon><View /></el-icon>
                    </p>
                    <div class="related-search-class clearfix" >
                      <a v-for="(v,i) in hotSearchList" :key="i"
                        href="#"
                        class="js_hot_keyword"
                        >{{ v['title'] }}</a
                      >
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            style="font-size: 18px"
            class="icon icon_search_close_mask js_close_btn_search"
            aria-hidden="true">
            <el-icon>
              <Close />
            </el-icon>
          </div>
        </div>
      </div>
      <!--搜索end -->
      <!-- 轮播图 start -->
      <div
        class="swiper-container swiper-container-wwwbg swiper-container-fade swiper-container-initialized swiper-container-horizontal"
      >
        <div class="swiper-wrapper">
          <div class="swiper-slide swiper-slide-active">
            <el-carousel height="580px">
              <el-carousel-item
                v-for="(item, index) in bannerList"
                :key="index"
              >
                <p
                  class="item-company swiper-img-bg"
                  :style="{ backgroundImage: `url(${item['full_url']})` }"
                ></p>
                <div class="news-banner-mask"></div>
                <div class="swiper-author-information">
                  <a href="#" class="user-author clearfix ll_point_jsfun">
                    <span class="user-author-name">{{ item["title"] }}</span>
                  </a>
                  <div class="author-content" style="color: aliceblue">
                    {{ item['desc'] }}
                  </div>
                </div>
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
      </div>
      <!-- 轮播图 end -->
    </div>
    <!--搜索 + 轮播图end -->
    <!-- 内容 start -->
    <div class="new-edition-home">
      <div class="interest-occupying" ref="interestOccupyingRef">
        <div class="flex-top-interest">
          <div class="interest-content">
            <div class="tab-class-gallery">
              <a data-class_id="0" class="active">为您推荐</a>
 
              <!-- <a
                                data-class_id="1" class="">住宅设计</a> <a data-class_id="3" class="">商业地产</a> <a
                                data-class_id="4" class="">文体医疗</a> <a data-class_id="5" class="">娱乐场所</a> <a
                                data-class_id="6" class="">餐饮空间</a> <a data-class_id="8" class="">建筑设计</a> <a
                                data-class_id="9" class="">景观设计</a> <a data-class_id="7" class="">公共空间</a> <a
                                data-class_id="2" class="">软装局部</a> <a class="title-active"></a>
                            <div class="hover-select-gallery"> <a class="more-class">更多</a>
                                <div class="item-select-content"> </div>
                            </div> -->
            </div>
            <!-- <div class="interest-search-category"><span class="select-class"> <i>全部类型</i> <svg class="icon"
                                    aria-hidden="true">
                                    <use xlink:href="#icon-direction_single_arrow_up_s"></use>
                                </svg> </span>
                            <div class="hover-search-category">
                                <ul>
                                    <li class="active" data-type="0">全部类型</li>
                                    <li data-type="1">3D模型</li>
                                    <li data-type="6">SU模型</li>
                                    <li data-type="8">CAD图纸</li>
                                    <li data-type="12">方案文本</li>
                                    <li data-type="11">全球案例</li>
                                    <li data-type="10">效果图</li>
                                    <li data-type="9">灵感图</li>
                                </ul>
                            </div>
                        </div> -->
          </div>
        </div>
      </div>
 
      <div class="main-home-scroll">
        <ul class="waterfall clearfix">
          <ul
            v-infinite-scroll="load" infinite-scroll-distance="100"
             :infinite-scroll-disabled="disabled"
            style="overflow: auto"
          >
            <waterfallContent :productList="productList"></waterfallContent>
          </ul>
          <div style="text-align: center;" v-if="loading">加载中...</div>
          <div style="text-align: center;" v-if="noMore">没有更多了</div>
        </ul>
      </div>
    </div>
    <!-- 内容end -->
    <!--页脚 -->
    <footerContent>
    </footerContent>

    <!--页脚 -->
    <loginFun></loginFun>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted, reactive, computed } from "vue";
import { sayHello } from "/@/assets/js/public.js";
import { newFooter } from "/@/assets/js/new_footer.js";
import waterfallContent from "../components/waterfallContent.vue";
import footerContent from "../components/footerContent.vue";
import headerCon from "../components/header.vue";
import loginFun from "../components/login.vue";
import {
  getBanner,
  getProductList,
  hotSearch
} from "../api/home/index";
import { useSiteConfig } from '../stores/siteConfig'
const siteConf = useSiteConfig()
const bannerList = ref([]); //轮播图数据
//获取banner数据
getBanner({}).then((res) => {
  if (res.code === 1) {
    bannerList.value = res.data.list;
  }
});
//数据源
const productList = ref<object[]>([]);
const productTotal = ref(0);
const page = ref(1);
const limit = ref(10);
const loading = ref(false);
const noMore = computed(() => (page.value * limit.value) > productTotal.value);
const disabled = computed(() => loading.value || noMore.value)
const getProduct = () => {
  getProductList({ page: page.value, limit: limit.value }).then((res) => {
    if (res.code === 1) {
      productTotal.value = Number(res.data.total);
      if (res.data.list.length > 0) {
        productList.value = [...productList.value, ...res.data.list];
      }

    }
  });
};
//下拉加载
const load = () => {
   loading.value = true
  setTimeout(() => {
    page.value++;
    getProduct();
    loading.value = false;
  }, 2000);

};

//热门搜索
const hotSearchList = ref([])
hotSearch({}).then((res) => {
  if (res.code === 1) {
    hotSearchList.value = res.data.list;
  }
});


const logoActive = ref(1);
const myDiv = ref();
// 可以在这里添加生命周期钩子
let observer = null;
onMounted(() => {
  // 组件挂载后的逻辑
  getProduct();
  sayHello();
  newFooter();
  const btn = document.getElementById("container") as HTMLElement;
  // 创建一个MutationObserver实例
  //mutationsList:变化节点属性的数组
  observer = new MutationObserver((mutationsList) => {
    for (let mutation of mutationsList) {
      const customData = myDiv.value.customFun();
      if (customData == "example") {
        logoActive.value = 2;
      } else {
        logoActive.value = 1;
      }
    }
  });

  // 开始监听属性变化
  observer.observe(btn, {
    subtree: true,
    attributeFilter: ["class"],
    attributes: true, // 是否监视正在监视的一个或多个节点上属性值的更改
  });
});
onUnmounted(() => {});
</script>
<style scoped></style>
